<%--    
创建时间：2018年3月22日下午10:57:57   
创 建 人：JobsZhang  
相关说明：   
JDK1.7 tomcat7 servlet2.5    
--%>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>上传测试</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/uploader.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css" media="all" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/webuploader.js" ></script>
<style type="text/css">
div.layui-layer.layui-layer-page{
	right: 0 !important;
    left: inherit !important;
}
.download{
	padding: 2px 15px;
}
.hiden{
	display: none;
}
.info{
    position: relative;
    width: 100%;
    padding: 7px 7px 0;
    border-width: 1px 0 0;
    height: 41px;
    font-size: 12px;
}
.miniBtn{
    margin-left: 10px;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    font-size: 12px;
    background-color: #009688;
}
.btn-danger{
	background-color: #FF5722;
}
.btn-normal {
    background-color: #1E9FFF;
}
.btn-warm {
    background-color: #FFB800;
}
</style>
</head>
<body>
	<div  id="downloadBtn"></div>
</body>
<div id="download" class="download" style="display: none">
<table  class="layui-table" lay-size="sm">
  <thead>
    <tr>
      <th>文件名</th>
      <th>文件大小</th>
      <th>百分比</th>
      <th>状态</th>
      <th>操作</th>
    </tr> 
  </thead>
  <tbody id="fileList">
  </tbody>
</table>
	<div class="info">
		<span id="infoPC"></span>
		<p>
			选中<span class="ShowfileAllNum">0</span>个文件，共<span class="showFileAllSize">0</span>M。
		</p>
		<p class="hiden">
			共<span class="ShowfileAllNum">0</span>个文件（<span class="showFileAllSize">0</span>M），已上传
		    <span class="completeNum">0</span>个文件，上传完毕
		 </p>
	</div>
</div>
<script type="text/javascript">


var layer;
layui.use(['layer'], function(){
	layer = layui.layer;
});

function showWindow(){
	//iframe窗
	var index=layer.open({
	  type: 1,
	  title:  ['上传队列', 'font-size:14px;'],
	  closeBtn: 0, //不显示关闭按钮
	  shade: false,
	  area: ['600px', '400px'],
	  offset: 'rb', //右下角弹出
	  anim: 2,
	  maxmin :true,
	  content: $("#download"), //iframe的url，no代表不显示滚动条
	});
	return index;
}




//如果开启分块上传，注册三个时间点函数
var fileCheckUrl='${pageContext.request.contextPath}/UploadMixServlet?action=fileCheck';//检测文件是否存在url
var checkChunkUrl='${pageContext.request.contextPath}/UploadMixServlet?action=checkChunk';//检测分片url
var mergeChunksUrl='${pageContext.request.contextPath}/UploadMixServlet?action=mergeChunks'; //合并文件请求地址
var swf = "${pageContext.request.contextPath}/js/webuploader/js/Uploader.swf";
var  percentages = {}; // 所有文件的进度信息，key为file id
//监控文件上传的三个时间点(注意：该段代码必须放在WebUploader.create之前)
//时间点1：:所有分块进行上传之前（1.可以计算文件的唯一标记;2.可以判断是否秒传）   
//时间点2： 如果分块上传，每个分块上传之前（1.询问后台该分块是否已经保存成功，用于断点续传）
//时间点3：所有分块上传成功之后（1.通知后台进行分块文件的合并工作）
WebUploader.Uploader.register({
    "before-send-file":"beforeSendFile",
    "before-send":"beforeSend",
    "after-send-file":"afterSendFile"
},{
    //时间点1：:所有分块进行上传之前调用此函数
	//时间点1：:所有分块进行上传之前调用此函数
    beforeSendFile:function(file){//利用md5File（）方法计算文件的唯一标记符
   	 //创建一个deffered
        var deferred = WebUploader.Deferred();
        //1.计算文件的唯一标记，用于断点续传和秒传
        (new WebUploader.Uploader()).md5File(file,0,5*1024*1024).progress(function(percentage){
        	
        }).then(function(val){
                fileMd5 = file.size+"-"+val+"-"+file.name;
                file.fileMd5=fileMd5;
              
                //2.请求后台是否保存过该文件，如果存在，则跳过该文件，实现秒传功能
                $.ajax({
                    type:"POST",
                    url:fileCheckUrl,
                    data:{
                        //文件唯一标记
                        fileMd5:fileMd5
                    },
                    dataType:"json",
                    success:function(response){
                        if(response.ifExist){
                            //如果存在，则跳过该文件，秒传成功
                            deferred.reject();
                        }else{
                            //继续上传
                            deferred.resolve();
                        }
                    }
                    }
                );

            });
        //返回deffered
        return deferred.promise();
    },
  //时间点2：如果有分块上传，则 每个分块上传之前调用此函数
    //block:代表当前分块对象
   beforeSend:function(block){//向后台发送当前文件的唯一标记，用于后台创建保存分块文件的目录
	 	
  	   	//1.请求后台是否保存过当前分块，如果存在，则跳过该分块文件，实现断点续传功能
      var deferred = WebUploader.Deferred();
      //请求后台是否保存完成该文件信息，如果保存过，则跳过，如果没有，则发送该分块内容
      $.ajax({
          type:"POST",
          url:checkChunkUrl,
          data:{
              //文件唯一标记
              fileMd5: block.file.fileMd5,
              //当前分块下标
              chunk:block.chunk,
              //当前分块大小
              chunkSize:block.end-block.start
          },
          dataType:"json",
          success:function(response){
              if(response.ifExist){
                  //分块存在，跳过该分块
                  deferred.reject();
              }else{
                  //分块不存在或者不完整，重新发送该分块内容
                  deferred.resolve();
              }
          }
          }
      );
      //携带当前文件的唯一标记到后台，用于让后台创建保存该文件分块的目录
      this.owner.options.formData.fileMd5 = block.file.fileMd5;
      return deferred.promise();  
   },
   //时间点3：所有分块上传成功之后调用此函数
   afterSendFile:function(file){//前台通知后台合并文件
       //1.如果分块上传，则通过后台合并所有分块文件
   	 //请求后台合并文件
       $.ajax({
           type:"POST",
           url:mergeChunksUrl,
           data:{
               fileMd5:file.fileMd5,//文件唯一标记
               fileName:file.name //文件名称
           },
           dataType:"json",
           success:function(response){
        	   
           }
       });
   }
});

var fileAllNum=0;
var fileAllSize=0;
var fileAllFinishSize=0
var filePicker = $("#downloadBtn");
var parentId;
// 实例化
var uploader = WebUploader.create({
  	auto :true,//是否自动上传
      pick: {
          id: filePicker,
          label: '点击选择文件'
      },
      dnd: false,//拖拽容器
      paste: false,//粘贴容器
      swf: swf,
      chunked: true,//是否要分片处理大文件上传。
      chunkSize: 2*1024*1024,//如果要分片，分多大一片？ 默认大小为5M.
      server:"${pageContext.request.contextPath}/TransmissionServlet",
      // runtimeOrder: 'flash',
      accept: {
          title: 'mediaFile',
          extensions: 'gif,jpg,jpeg,bmp,png,3gp,mp4,rmvb,mov,avi,m4v,mp3',
          mimeTypes: 'image/*,video/*,audio/*,application/*'
       },
      // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
      disableGlobalDnd: true,
      fileNumLimit:2, 
      fileSizeLimit:900*1024*1024,
      fileSingleSizeLimit:900*1024*1024,
      threads:5,
      //在上传当前文件时，准备好下一个文件
      prepareNextFile:true
});
/**文件加入队列**/
uploader.on( 'fileQueued', function( file ) {
	showWindow();
	fileAllNum++;
	fileAllSize+=file.size;
	setInfo();
	var fileSize = (file.size/1024/1024.0).toFixed(2)+"M";
	var fileName = file.name.length>15?file.name.slice(0,15):file.name;
	var htm ='<tr id="'+file.id+'"><td class="fileName">'+fileName+'</td><td class="fileSize">'+fileSize+'</td><td class="fileProcess">0%</td><td class="fileStatus">等待上传</td>'+
	      '<td class="fileOperate">'+
	      '<div class="button-groups">'
	      +'<a href="javaScript:void(0)" class="start miniBtn btn-normal">开始上传</a>'
	      +'<a href="javaScript:void(0)" class="stop hiden miniBtn btn-warm ">暂停上传</a>'
	      +'<a href="javaScript:void(0)" class="delete miniBtn btn-danger">删除</a>'
	      +'</div></td>'
	$("#fileList").append(htm);
	      
	$("#"+file.id).find(".start").bind("click",function(){
		parentId = file.id;
		startUpload(file);
		setSingleStatus('uploading');
	});
	$("#"+file.id).find(".stop").bind("click",function(){
		parentId = file.id;
		stopUpload(true);
		setSingleStatus('stop');
	});
	$("#"+file.id).find(".delete").bind("click",function(){
		parentId = file.id;
		uploader.removeFile( file, true );
		$("#"+file.id).remove();
	});
	
	percentages[ file.id ] = [ file.size, 0 ];
})



/**从文件队列移除**/
uploader.on('fileDequeued', function( file ) {
	parentId = file.id;
	fileAllNum--;
	fileAllSize-=file.size;
	delete percentages[ file.id ];
	setInfo();
});


/**上传过程中触发，携带上传进度**/
uploader.on('uploadProgress',function(file ,percentage){
	parentId = file.id;
	var percent=(percentage*100 ).toFixed(0)+"%";
	$("#"+file.id).find(".fileProcess").text(percent);
	if(JSON.stringify(percentages) != "{}"){
	    percentages[ file.id ][ 1 ] = percentage;
	}
})

/**文件上传成功**/ 
uploader.on( 'uploadSuccess', function( file, res ) { 
	percentages[ file.id ][ 1 ] = 1;
	setSingleStatus('finish');
  	 
}); 

/**所有状态更新底部信息**/
uploader.on( 'all', function( type ,file) {
	setInfo();
	 
	 switch( type ) {
     case 'uploadFinished':
    	 setSingleStatus('finish');
    	 console.log(type);
         break;

     case 'uploadProgress':
    	 console.log(type);
    	 setSingleStatus('uploading');
         break;
     case 'uploadStart':
    	 console.log(type);
    	 setSingleStatus('uploading');
         break;

     case 'stopUpload':
    	 console.log(type);
    	 setSingleStatus('stop');
         break;

 }
})


/**当所有文件上传结束时触发。**/
uploader.on( 'uploadFinished', function( file, res ) { 
	
}); 


/**不管成功或者失败，文件上传完成时触发**/
uploader.on( 'uploadComplete', function( file, res ) { 
	
}); 

uploader.on('error',function(type,file ){
	if (type=="Q_TYPE_DENIED"){
	       alert("只能上传gif,jpg,jpeg,bmp,png,3gp,mp4,rmvb,mov,avi,m4v,mp3");
	    }else if(type=="Q_EXCEED_SIZE_LIMIT"){
	       alert("所有的文件大小总和不能超过900M");
	    }else if(type=='F_EXCEED_SIZE'){
	    	 alert("单个文件大小不能超过900M");
	    }else if(type=='Q_EXCEED_NUM_LIMIT'){
	    	alert("只能上传2个文件");
	    }else if(type=='F_DUPLICATE'){
	    	alert(file.name+"已经在上传队列，请勿重复上传");
	    }else{
	    	alert("上传出错");
	    }
})

function setSingleStatus(type){
	  switch ( type ) {
	 	 case 'uploading':
	 		$("#"+parentId).find(".start").addClass("hiden");
			$("#"+parentId).find(".stop").removeClass("hiden");
			$("#"+parentId).find(".fileStatus").text("正在上传");
			break;
	 	 case 'stop':
	 		$("#"+parentId).find(".start").text("继续上传");
			$("#"+parentId).find(".fileStatus").text("已暂停");
			$("#"+parentId).find(".start").removeClass("btn-normal");
			$("#"+parentId).find(".stop").addClass("hiden");
			$("#"+parentId).find(".start").removeClass("hiden");
			break;
	 	 case 'finish':	
	 		$("#"+parentId).find(".fileStatus").text("上传完成");
	 	  	$("#"+parentId).find(".stop").addClass("hiden");
	 	  	break;
	  }
}
/***设置最底下的文件信息***/
function setInfo(){
	/* 获取文件统计信息。返回一个包含一下信息的对象。
	successNum 上传成功的文件数
	progressNum 上传中的文件数
	cancelNum 被删除的文件数
	invalidNum 无效的文件数
	uploadFailNum 上传失败的文件数
	queueNum 还在队列中的文件数
	interruptNum 被暂停的文件数 */
	var obj = uploader.getStats();
	$.each($('.ShowfileAllNum'),function(i,item){
		$(item).text(fileAllNum);
	})
	var fileSize = (fileAllSize/1024/1024.0).toFixed(2);
	$.each($('.showFileAllSize'),function(i,item){
		$(item).text(fileSize);
	})
	$(".completeNum").text(obj.successNum);
	updateTotalProgress();
}
/**设置总百分比**/
function updateTotalProgress() {
    var loaded = 0;
    var total = 0;
    var spans = $("#infoPC");
    var percent = 0;;

    $.each( percentages, function( k, v ) {
        total += v[ 0 ];
        loaded += v[ 0 ] * v[ 1 ];
    } );
    percent = total ? loaded / total : 0;
    spans.text( Math.round( percent * 100 ) + '%' );
}
/***暂停上传***/
function stopUpload(file){
	if(file==undefined){
		uploader.stop();
	}else{
		uploader.stop(file);
	}
}
/**开始上传**/
function startUpload(file){
	if(file==undefined){
		uploader.upload();
	}else{
		uploader.upload(file);
	}
	
}


</script>
</html>